<page-header />
<div class="mb-md">
  <button (click)="uploadFile()" nzType="primary" nz-button><i nz-icon nzType="upload" nzTheme="outline"></i>上传</button>
  <button (click)="addFolder()" nz-button><i nz-icon nzType="folder-add" nzTheme="outline"></i>新建文件夹</button>
  @if (showFileControl.group) {
    <nz-button-group style="margin-left: 10px" />
  }
</div>
<nz-breadcrumb nzSeparator=">">
  @if (nodeLevel.length > 0) {
    <nz-breadcrumb-item>
      <a (click)="prevFolder()"><i nz-icon nzType="rollback"></i>上一级</a>
    </nz-breadcrumb-item>
  }
  <nz-breadcrumb-item>
    <a (click)="nodeLevel = []; getUserNode('0')"><i nz-icon nzType="home" nzTheme="twotone"></i>根目录</a>
  </nz-breadcrumb-item>
  @for (level of nodeLevel; track $index) {
    <nz-breadcrumb-item>
      <a (click)="intoNode(level)">{{ level.name }}</a>
    </nz-breadcrumb-item>
  }
</nz-breadcrumb>
<st #st [data]="data" [columns]="columns" [page]="page" (change)="rowChange($event)" multiSort>
  <ng-template st-row="name" let-item>
    <span style="cursor: pointer" (click)="intoNode(item)">{{ item.name }}</span>
  </ng-template>
  <ng-template st-row="preview" let-item>
    @if (item.type == 'image') {
      <app-preview-image [width]="100" [height]="50" [record]="item" />
    }
  </ng-template>
  <ng-template st-row="type" let-item>
    <i nz-icon [nzType]="getFileType(item.type)" nzTheme="twotone"></i>
  </ng-template>
  <ng-template st-row="size" let-item>
    <span>{{ getFileSize(item.type, item.size) }}</span>
  </ng-template>
</st>
<nz-drawer
  [nzClosable]="false"
  [nzVisible]="visibleDraw"
  nzPlacement="right"
  [nzTitle]="currentPreview.name || '预览'"
  [nzWidth]="720"
  (nzOnClose)="closeDraw()"
>
  <ng-container *nzDrawerContent>
    @if (currentPreview.type == 'video' || currentPreview.type == 'sound') {
      <app-vjs-player [record]="currentPreview" />
    } @else if (
      currentPreview.type == 'excel' || currentPreview.type == 'ppt' || currentPreview.type == 'word' || currentPreview.type == 'pdf'
    ) {
      <app-preview-pdf [record]="currentPreview" />
    } @else if (currentPreview.type == 'text') {
      <app-preview-text [record]="currentPreview" />
    } @else {
      <article nz-typography>
        <h1 nz-typography>抱歉</h1>
        <p nz-typography>暂不支持预览 </p>
      </article>
    }
  </ng-container>
</nz-drawer>
